import { Button, Flex } from 'antd';
import { useState, useEffect } from 'react';

const baseStyle: React.CSSProperties = {
  width: '45%',
  textAlign: 'center',
};

const data: { [key: number]: string[] } = {
  1: [
    '王某某  2252344',
    '徐某某  176245230121',
    '张某某  2463257524',
    '王某某  138443256541411',
    '李某某  12565284612',
    '王某某  17643520121',
    '戴某某  2122584',
    '王某某  13245542511',
    '陈某某  17624420121',
    '成某某  1762454520121',
  ],
  2: [
    '徐某某  22342344',
    '哈某某  1745620121',
    '无某某  2465r37524',
    '王某某  13845341411',
    '测某某  12841y6612',
    'test某某',
    '王某某  17620121',
    '戴某某  215454584',
    '王某某  1325454511',
    '陈某某  176204234121',
    '杨某某  1762342340121',
  ],
  3: [
    '刘某某  22333344',
    '王某某  17622130121',
    '干某某  246732434524',
    '策某某  13845511411',
    '徐某某  1284652112',
    '代某某  181158511',
    '王某某  176520121',
    '戴某某  21524284',
    '王某某  133232511',
    '陈某某  17620232121',
    '和某某  176442420121',
  ],
};

const PersonList = () => {
  const [showData, setShowData] = useState<string[]>([]);
  const [interval, changeInterval] = useState<any>(null);

  /**
   * 初始化定时器
   */
  const init = () => {
    let index = 1;
    // 新增定时器
    const timOut = setInterval(() => {
      setShowData(data[index]);
      index = index < 3 ? index + 1 : 1;
    }, 100);

    changeInterval(timOut);
  };
  /**
   * 停止，确定中奖名单
   */
  const end = () => {
    clearInterval(interval);
  };
  // 组件销毁，销毁定时器
  useEffect(() => {
    init();
    return () => {
      clearInterval(interval); // 组件卸载时清除定时器
    };
  }, []);

  return (
    <>
      <div className="min-h-[300px] pt-[30px]">
        <Flex gap="large" wrap="wrap" flex="50%">
          {showData.map((ele) => {
            return (
              <p style={baseStyle} key={ele}>
                {ele}
              </p>
            );
          })}
        </Flex>
      </div>
      <p className="text-center pb-[30px]">
        <Button
          type="primary"
          shape="round"
          size="large"
          onClick={() => {
            end();
          }}
        >
          停止
        </Button>
      </p>
    </>
  );
};

export default PersonList;
